/**
 * @description 连接时，弹出可选窗口选择组件连接
 */
function ConnectSelect(connectionHandler) {
  this.graph = null
  this.mxMouseEvent = null
  this.connectSelect = null
  this.arrowDirection = null
  this.sourceCell = null
  this.edgeState = null
  this.point = {}
  this.callBack = () => {}

  /**
   * @link http://192.168.0.100:8000/zentao/bug-view-23017.html
   * 元素选择时，translate会不准，导致偏移
   */
  connectionHandler.addListener(mxEvent.START, (a)=> {
    a.graph.clearSelection()
  })
}

ConnectSelect.prototype.init = function (graph, mxMouseEvent, edgeState, sourceCell, callBack) {
  this.graph = graph
  this.mxMouseEvent = mxMouseEvent
  this.edgeState = edgeState
  this.sourceCell = sourceCell
  this.callBack = callBack

  const graphBounds = graph.view.graphBounds
  // 左边与上边超出画布的范围
  if((graphBounds.x > mxMouseEvent.graphX - 12) || (graphBounds.y > mxMouseEvent.graphY - 12)) {
    return;
  }
  if (window.zTreeObj.currentSelectedNode.modelType === 'DIAGRAM_IDEF0') {
    if (sourceCell.toBeRemoved !== 'toBeRemoved') {
      const toBeRemovedCells = window.myEditor.graphEvent.createToBeRemovedCell(graph, mxMouseEvent)
      this.callBack(toBeRemovedCells[0])
      return
    }
  }

  const cellList = this.getShapePicker()
  if(!cellList || !cellList.length) return

  // 获取当前箭头朝向
  this.getArrowDirection(edgeState && edgeState.absolutePoints)

  if (this.connectSelect != null) {
    console.log('???');
  }
  const div = document.createElement('div');
  div.className = 'geToolbarContainer geSidebarContainer geSidebar connectSelect';
  div.style.cssText = 'position:absolute;left:' + mxMouseEvent.graphX + 'px;top:' + mxMouseEvent.graphY +
    'px;padding:20px 30px;text-align:left;border:unset;';
  mxUtils.setPrefixedStyle(div.style, 'transform', 'translate(-20px,-22px)');

  const box = document.createElement('div');
  box.style.cssText = 'box-shadow:0px 0px 3px 1px #d1d1d1;padding: 0;width: 100px;background-color: #fff;'
  div.appendChild(box);

  cellList.forEach(cell => {
      box.appendChild(this.addSelectCell(cell))
  })

  this.graph.container.appendChild(div);
  this.connectSelect = div
}

ConnectSelect.prototype.getShapePicker = function() {
  if (!this.sourceCell.value) return;
  const metaIds =
    window.relationRules?.[this.sourceCell.value.getAttribute('metaId')]?.[window.edgeValue.getAttribute('metaId')];
  if (!metaIds) return;
  return Sidebar.prototype.cellAndStyleMap.reduce((acc, cur) => {
    //去掉引用的对象
    if (!acc.includes(cur.cell) && metaIds.includes(cur.metaId) && cur.nodeName !== 'quote') {
      acc.push(cur.cell);
    }
    return acc;
  }, []);
};


ConnectSelect.prototype.addSelectCell = function (_cell) {
  // Wrapper needed to catch events
  const node = document.createElement('div');
  node.style.cssText = 'padding: 5px 20px;font-size:12px;color: #000;line-height:14px;border-bottom:1px solid rgb(172 172 172);cursor: pointer;'
  node.innerText = _cell.value.getAttribute('name')
  node.addEventListener('click', () => {
    // 添加
    let x = this.point.x / this.graph.view.scale - this.graph.view.translate.x
    let y = this.point.y / this.graph.view.scale - this.graph.view.translate.y
    const cell = this.graph.cloneCell(_cell);
    const width = cell.geometry.width
    const height = cell.geometry.height
    switch (this.arrowDirection) {
      case 'top':
        x -= width / 2
        y -= height
        break;
      case 'bottom':
        x -= width / 2
        break;
      case 'left':
        x -= width
        y -= height / 2
        break;
      default:
        y -= height / 2
        break;
    }
    cell.geometry.x = x
    cell.geometry.y = y
    window.myEditor.editor.graph.addCells([cell], undefined, undefined, undefined, undefined, undefined, true)
    if (typeof (cell.value) == 'object' && cell.value != null && cell.value.nodeName == 'quote') {
      // 引用成功后的回调
      window.toggleQuoteCallBack = ({id, name}) => {
        this.callBack(cell)
        updateCellAttribute(cell, window.myEditor.editor.graph, {id, name})
        window.toggleQuoteCallBack = null
      }
      // 打开引用窗口
      editQuoteNode(cell, window.myEditor.editor.graph);
      return
    }
    updateCellAttribute(cell, window.myEditor.editor.graph, {name: cell.value.getAttribute('name')})



    // 连接
    this.callBack(cell)
  });
  return node
};

ConnectSelect.prototype.getArrowDirection = function (absolutePoints) {
  const point = absolutePoints.splice(absolutePoints.length - 2, 2)
  if (point[0].x == point[1].x) {
    if (point[0].y > point[1].y) {
      this.arrowDirection = 'top'
    }
    if (point[0].y < point[1].y) {
      this.arrowDirection = 'bottom'
    }
  }
  if (point[0].y == point[1].y) {
    if (point[0].x < point[1].x) {
      this.arrowDirection = 'right'
    }
    if (point[0].x > point[1].x) {
      this.arrowDirection = 'left'
    }
  }

  this.point = point[1]
}

ConnectSelect.prototype.removeConnectSelect = function () {
  if (this.connectSelect != null) {
    this.connectSelect.parentNode.removeChild(this.connectSelect);
    this.sourceCell = null
    this.connectSelect = null;
    this.callBack = () => {};
  }
};
